<template>
  <el-dialog
    v-model="visible"
    title="编辑签署位"
    width="400px"
    destroy-on-close
    @close="handleClose"
  >
    <el-form :model="editingSignature" label-width="80px">
      <el-form-item label="类型">
        <el-tag :type="getSignatureTagType(editingSignature.type)">{{ getSignatureTypeName(editingSignature.type) }}</el-tag>
      </el-form-item>
      <el-form-item label="位置">
        <div class="position-inputs">
          <el-input-number v-model="editingSignature.x" :min="0" :max="2000" size="small" label="X坐标" />
          <el-input-number v-model="editingSignature.y" :min="0" :max="2000" size="small" label="Y坐标" />
        </div>
      </el-form-item>
      <el-form-item label="尺寸">
        <div class="position-inputs">
          <el-input-number v-model="editingSignature.width" :min="20" :max="500" size="small" label="宽度" />
          <el-input-number v-model="editingSignature.height" :min="20" :max="500" size="small" label="高度" />
        </div>
      </el-form-item>
      <el-form-item v-if="editingSignature.type === 'text'" label="内容">
        <el-input v-model="editingSignature.content" placeholder="请输入文本内容" />
      </el-form-item>
      
      <!-- 印章编辑选项 -->
      <template v-if="editingSignature.type === 'stamp'">
        <el-form-item label="章内容">
          <el-input v-model="editingSignature.stampText" placeholder="请输入印章文字" maxlength="20" show-word-limit />
        </el-form-item>
        
        <el-form-item label="章形状">
          <el-radio-group v-model="editingSignature.stampShape">
            <el-radio value="circle">圆形</el-radio>
            <el-radio value="square">方形</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item label="章颜色">
          <el-color-picker v-model="editingSignature.stampColor" show-alpha :predefine="stampColorPresets" />
        </el-form-item>
        
        <el-form-item label="边框宽度">
          <el-slider v-model="editingSignature.stampBorderWidth" :min="1" :max="5" show-input />
        </el-form-item>
        
        <el-form-item label="字体大小">
          <el-slider v-model="editingSignature.stampFontSize" :min="8" :max="20" show-input />
        </el-form-item>
        
        <el-form-item label="骑缝章">
          <el-switch v-model="editingSignature.isRidingStamp" @change="handleRidingStampChange" />
        </el-form-item>
      </template>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'

/**
 * 签署位元素接口
 */
interface SignatureElement {
  id: string
  type: 'signature' | 'text' | 'date' | 'stamp'
  x: number
  y: number
  width: number
  height: number
  content?: string
  isRidingStamp?: boolean
  // 印章相关属性
  stampText?: string
  stampColor?: string
  stampShape?: 'circle' | 'square'
  stampBorderWidth?: number
  stampFontSize?: number
}

/**
 * 组件属性定义
 */
interface Props {
  modelValue: boolean
  signature: SignatureElement | null
  A4Width: number
}

/**
 * 组件事件定义
 */
interface Emits {
  (e: 'update:modelValue', value: boolean): void
  (e: 'confirm', signature: SignatureElement): void
  (e: 'ridingStampChange', isRidingStamp: boolean): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 对话框显示状态
const visible = ref(false)

// 编辑中的签署位数据
const editingSignature = reactive<SignatureElement>({
  id: '',
  type: 'signature',
  x: 0,
  y: 0,
  width: 100,
  height: 50,
  content: '',
  isRidingStamp: false,
  // 印章默认属性
  stampText: '福建雄翔建设发展有限公司',
  stampColor: '#FF0000',
  stampShape: 'circle',
  stampBorderWidth: 2,
  stampFontSize: 12
})

// 印章颜色预设
const stampColorPresets = ref([
  '#FF0000', // 红色
  '#0000FF', // 蓝色
  '#008000', // 绿色
  '#800080', // 紫色
  '#000000', // 黑色
  '#FF6600', // 橙色
])

/**
 * 监听modelValue变化
 */
watch(
  () => props.modelValue,
  (newValue) => {
    visible.value = newValue
    if (newValue && props.signature) {
      // 复制签署位数据到编辑对象
      Object.assign(editingSignature, props.signature)
    }
  },
  { immediate: true }
)

/**
 * 监听visible变化
 */
watch(visible, (newValue) => {
  emit('update:modelValue', newValue)
})

/**
 * 获取签署位类型名称
 * @param type 签署位类型
 * @returns 类型名称
 */
const getSignatureTypeName = (type: string): string => {
  switch (type) {
    case 'signature':
      return '签名'
    case 'stamp':
      return '印章'
    case 'text':
      return '文本'
    case 'date':
      return '日期'
    default:
      return '未知类型'
  }
}

/**
 * 获取签署位标签类型
 * @param type 签署位类型
 * @returns 标签类型
 */
const getSignatureTagType = (type: string): string => {
  switch (type) {
    case 'signature':
      return 'warning'
    case 'stamp':
      return 'danger'
    case 'text':
      return 'primary'
    case 'date':
      return 'success'
    default:
      return 'info'
  }
}

/**
 * 处理骑缝章状态变化
 */
const handleRidingStampChange = () => {
  if (editingSignature.isRidingStamp) {
    // 启用骑缝章，将元素移动到中间位置
    editingSignature.x = props.A4Width / 2 - editingSignature.width / 2
  }
  emit('ridingStampChange', editingSignature.isRidingStamp)
}

/**
 * 处理取消操作
 */
const handleCancel = () => {
  visible.value = false
}

/**
 * 处理确认操作
 */
const handleConfirm = () => {
  emit('confirm', { ...editingSignature })
  visible.value = false
}

/**
 * 处理对话框关闭
 */
const handleClose = () => {
  emit('update:modelValue', false)
}
</script>

<style scoped>
.position-inputs {
  display: flex;
  gap: 10px;
}

.position-inputs .el-input-number {
  flex: 1;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>